{extend name="public/base"}

{block name="css"}
<style>
    .layui-upload-img {
        width: 92px;
        height: 92px;
        margin: 0 10px 10px 0;
    }
</style>
{/block}

{block name="main"}
<div class="layui-card">
    <blockquote class="layui-elem-quote layui-quote-nm">{empty name="data"}添加{else /}编辑{/empty}管理员</blockquote>
    <form class="layui-form" action="" lay-filter="component-form-group">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>小程序配置项</legend>
        </fieldset>

        <div class="layui-form-item">
            <label class="layui-form-label">小程序title</label>
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" value="{$wx_config.wxapp_title|default=''}" name="wxapp_title" placeholder="请输入" class="layui-input" >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">头部文字颜色</label>
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" value="{$wx_config.top_text_color|default=''}" name="top_text_color" placeholder="请选择颜色" class="layui-input" id="text-color-input">
            </div>
            <div class="layui-inline" style="left: -11px;">
                <div id="text_color"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">头部背景颜色</label>
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" value="{$wx_config.top_background_color|default=''}" name="top_background_color" placeholder="请选择颜色" class="layui-input" id="background-color-input">
            </div>
            <div class="layui-inline" style="left: -11px;">
                <div id="background_color"></div>
            </div>
        </div>

        <div class="layui-form-item layui-layout-admin">
            <div class="layui-input-block">
                <div class="layui-footer" style="left: 0;">
                    <button class="layui-btn" lay-submit="" lay-filter="component-form-demo1">立即提交</button>
                </div>
            </div>
        </div>

    </form>
</div>
{/block}

{block name="js"}
<script>
    layui.config({
        base: '/layui_admin/src/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'laydate', 'upload', 'colorpicker'], function () {
        let $ = layui.$
            , form = layui.form, admin = layui.admin, laydate = layui.laydate, layer = layui.layer, upload = layui.upload, colorpicker = layui.colorpicker;

        //头部文字颜色选择器
        colorpicker.render({
            elem: '#text_color'
            ,color: '{$wx_config.top_text_color|default=\'#1c97f5\'}'
            ,done: function(color){
                $('#text-color-input').val(color);
            }
        });

        //头部背景颜色选择器
        colorpicker.render({
            elem: '#background_color'
            ,color: '{$wx_config.top_background_color|default=\'#1c97f5\'}'
            ,done: function(color){
                $('#background-color-input').val(color);
            }
        });

        /* 监听提交 */
        form.on('submit(component-form-demo1)', function (data) {
            layer.load();
            //请求登入接口
            admin.req({
                url: "{:url('index')}" //实际使用请改成服务端真实接口
                ,type : 'post'
                ,data: data.field
                ,done: function(res){
                    //登入成功的提示与跳转
                    layer.msg('保存成功', {
                        offset: '15px'
                        ,icon: 1
                        ,time: 1000
                    }, function(){
                        location.reload(); //刷新页面
                    });
                }
            });
            return false;
        });
    });
</script>
{/block}